<template>
  <div class="form_panel cards">
    <el-form :model="ruleForm" :rules="rules" label-width="100px" ref="ruleForm">
      <el-card class="box-card mb20">
        <div slot="header" class="clearfix">
          <el-button type="success" icon="el-icon-check" circle></el-button>
          <span>基本信息</span>
        </div>
        <div>
          <el-form-item label="床型" prop="cbedtype">
            <el-select v-model="ruleForm.cbedtype"><el-option v-for="item in cbedOptions" :key="item.value" :label="item.label" :value="item.label"></el-option></el-select>
          </el-form-item>
          <el-form-item label="房间名称" prop="cname">
            <el-col :span="6"><el-input v-model="ruleForm.cname"></el-input></el-col>
          </el-form-item>
          <el-form-item label="付费方式" prop="cpaymode">
            <el-select v-model="ruleForm.cpaymode" placeholder="请选择付费方式">
              <el-option v-for="item in paymodeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="销售时间" required>
            <el-col :span="5">
              <el-form-item prop="bgndate">
                <el-date-picker type="date" placeholder="选择开始日期" v-model="ruleForm.bgndate" value-format="yyyy-MM-dd" style="width: 100%"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col class="line" :span="1">-</el-col>
            <el-col :span="5">
              <el-form-item prop="enddate">
                <el-date-picker type="date" placeholder="选择结束日期" value-format="yyyy-MM-dd" v-model="ruleForm.enddate" style="width: 100%"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-col :span="8">
            <el-form-item label="入住人数" prop="inum">
              <el-input-number v-model="ruleForm.inum" controls-position="right" @change="handleChange" :min="1" :max="2"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item prop="cisaddbed" label="是否可以加床">
              <el-switch v-model="ruleForm.cisaddbed" active-value="1" inactive-value="0" active-color="#13ce66">是否可以加床</el-switch>
              <!-- <el-checkbox :v-model="ruleForm.cisaddbed === 1 ? true : false" @change="handleCheck">是否可以加床</el-checkbox> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="详情" prop="caddbedmemo"><el-input v-model="ruleForm.caddbedmemo" placeholder="酒店可加儿童床一张，仅限儿童入住"></el-input></el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="早餐" prop="cbreakfast">
              <el-select v-model="ruleForm.cbreakfast">
                <el-option v-for="item in breakfastOptions" :key="item.value" :label="item.label" :value="item.label"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="取消规则" prop="ccancelflag">
              <el-select v-model="ruleForm.ccancelflag" @change="handleCcancelflag">
                <el-option v-for="item in deltypeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="取消说明" prop="deldesc">
              <el-input v-model="ruleForm.deldesc" placeholder="入住当日18：00前免费取消或变更  否则我们将扣除您全额或部分房费"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入住时间" prop="ccheckintime"><el-input v-model="ruleForm.ccheckintime"></el-input></el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="离店时间" prop="ccheckouttime"><el-input v-model="ruleForm.ccheckouttime"></el-input></el-form-item>
          </el-col>
        </div>
      </el-card>

      <el-card class="box-card mb20">
        <div slot="header" class="clearfix">
          <el-button type="success" icon="el-icon-check" circle></el-button>
          <span>价格详情</span>
        </div>
        <el-form ref="priceForm" :model="priceForm" inline label-width="100px">
          <el-form-item label="标准价" prop="dprice"><el-input v-model="ruleForm.dprice"></el-input></el-form-item>
          <div><h5>政策价：</h5></div>

          <el-row v-for="(item, index) in priceList" :key="index">
            <el-col :span="10">
              <el-form-item label="周日 至 周四">
                <el-col :span="3"><span class="el-icon-date"></span></el-col>
                <el-col :span="16">
                  <!-- <el-input type="number" v-model="prices[0]" @change="handlePrice"></el-input> -->
                  <el-input type="number" :v-model="item.nprice" @change="handlePrice"></el-input>
                </el-col>
                <el-col :span="5"><span>元</span></el-col>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="周五 至 周六">
                <el-col :span="3"><span class="el-icon-date"></span></el-col>
                <el-col :span="16">
                  <!-- <el-input type="number" v-model="prices[1]" @change="handlePricee"></el-input> -->
                  <el-input type="number" :v-model="item.nprice" @change="handlePricee"></el-input>
                </el-col>
                <el-col :span="5"><span>元</span></el-col>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <div class="grid-content">
                <el-button type="text" @click="dialogFormVisible = true">选择用户组</el-button>
                <el-dialog title="选择用户组" :visible.sync="dialogFormVisible">
                  <el-form>
                    <el-row>
                      <el-checkbox-group v-model="priceForm.ctotype" v-for="item in channelUsers" v-on:change="handleChannel" :key="item">
                        <el-col :span="8"><el-checkbox :label="item"></el-checkbox></el-col>
                      </el-checkbox-group>
                    </el-row>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                  </div>
                </el-dialog>
                <span class="el-icon-delete" @click="handleDelChannel(index)"></span>
              </div>
            </el-col>
          </el-row>
          <el-button type="text" style="float:right" @click="addChannel">继续添加>></el-button>
        </el-form>
      </el-card>

      <el-card class="box-card mb20">
        <div slot="header" class="clearfix">
          <el-button type="success" icon="el-icon-check" circle></el-button>
          <span>房间详情</span>
        </div>
        <!-- <editor :handleCdesc="handleCdesc"></editor> -->
        <editor ref="cdesc"></editor>
      </el-card>
      <el-card class="box-card mb20">
        <div slot="header" class="clearfix">
          <el-button type="success" icon="el-icon-check" circle></el-button>
          <span>配套设施</span>
        </div>
        <el-form-item>
          <el-row>
            <el-checkbox-group v-model="facilities" v-for="item in facilitiesList" v-on:change="handleChangeCs" :key="item">
              <el-col :span="8"><el-checkbox :label="item"></el-checkbox></el-col>
            </el-checkbox-group>
          </el-row>
        </el-form-item>
        <el-form-item prop="otherFacilities" label="其他">
          <el-input v-model="otherFacilities" @change="hanldeChangeOther" placeholder="输入时词条间以逗号（“,”）分隔"></el-input>
        </el-form-item>
      </el-card>

      <el-card class="box-card mb20">
        <div slot="header" class="clearfix">
          <el-button type="success" icon="el-icon-check" circle></el-button>
          <span>图片上传</span>
        </div>
        <el-form-item>
          <el-upload
            action="http://192.168.3.154:8080/bgrm/v1/hotel/product/save"
            list-type="picture-card"
            :on-remove="handleRemove"
            :onSuccess="uploadSuccess"
            :onError="uploadError"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <span v-for="(item, key) in imageList" :key="key"><img width="148px" height="148px" :src="item" /></span>
        </el-form-item>
      </el-card>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">保存并提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// import editor from './../common/editor.vue'
// import axios from 'axios'
// import { mapState, mapActions } from 'vuex'
// import { addProduct, updateProduct } from '../../services/apis/productHotel'
export default {
  data () {
    return {
      // filter: { uuid: '' },
      // // 模态框
      // dialogFormVisible: false,
      // formLabelWidth: '120px',
      // // 价格表单
      // priceForm: {
      //   ctype: '', // 类型（1--工作日，2--周末）
      //   ddate: '', // 日期（保留字段，类型1,2时不使用）
      //   nprice: '', //  政策价格
      //   ctotype: 'OTA', // 布给谁的类型（OTA）
      //   ctochannel: '云游旅行网' // 发布给具体对象（云游旅行网）
      // },
      // prices: [],
      // // 传给后台的数据对象
      // ruleForm: {
      //   cpicpath: '', // 上传图片
      //   cbedtype: '', // 床型
      //   bgndate: '', // 销售开始时间
      //   enddate: '', // 销售结束时间
      //   cpaymode: '', // 付费方式
      //   inum: 1, // 入住人数
      //   cisaddbed: '',
      //   caddbedmemo: '', // 是否可以加床
      //   cname: '', // 房间名称
      //   ccancelflag: '', // 取消规则，发给后台的0/1/2
      //   ccheckintime: '14:00', // 入住时间
      //   ccheckouttime: '12:00', // 离店时间
      //   dprice: '', // 标准价
      //   cdesc: '', // 房间详情
      //   cservicefacility: '', // 配套设施
      //   cbreakfast: '', // 早餐
      //   pricelist: [], // 价格列表
      //   deldesc: '' // 取消说明
      // },
      // priceList: [], // 继续添加
      // dialogVisible: false,
      // facilities: [], // 配套设施
      // imageList: [], // 图片数组
      // otherFacilities: '', // 其他配套设施
      // facilitiesList: [
      //   '餐厅',
      //   '收费停车场',
      //   '电梯',
      //   '大堂免费报纸',
      //   '无烟楼梯',
      //   '行政楼层',
      //   '无限WIFI',
      //   '前台贵重物品保险柜',
      //   '行李寄存',
      //   '吸烟区',
      //   '咖啡厅',
      //   '自动取款机',
      //   '公共区域电视监控',
      //   '健身房'
      // ],
      // 渠道用户组
      // channelUsers: ['OTA']
      // 表单验证
      // rules: {
        // cname: [
        //   { required: true, message: '请输入房间名称', trigger: 'blur' },
        //   { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        // ],
        // cbreakfast: [
        //   { required: true, message: '请选择早餐类型', trigger: 'change' }
        // ],
        // ccancelflag:[
        //   { required: true, message: '请选择取消规则', trigger: 'change' }
        // ],
        // cbedtype: [
        //   { required: true, message: '请选择床型', trigger: 'change' }
        // ],
        // cpaymode: [
        //   { required: true, message: '请选择付费方式', trigger: 'change' }
        // ],
        // bgndate: [
        //   { required: true, message: '请选择日期', trigger: 'change' }
        // ],
        // enddate: [
        //   { required: true, message: '请选择时间', trigger: 'change' }
        // ],
        // ccheckintime: [
        //   { required: true, message: '请输入入住时间', trigger: 'blur' }
        // ],
        // ccheckouttime: [
        //   { required: true, message: '请输入退房时间', trigger: 'blur' }
        // ],
        // dprice:[
        //   { required: true, message: '请输入标准价', trigger: 'blur' }
        // ]
      // }
    }
  },
  computed: {
    // ...mapState({
    //   cbedOptions: state => state.route.cbedOptions,
    //   breakfastOptions: state => state.route.breakfastOptions,
    //   paymodeOptions: state => state.route.paymodeOptions,
    //   deltypeOptions: state => state.route.deltypeOptions,
    //   productDetailData: state => state.route.productDetailData,
    //   pricelist: state => state.route.pricelist
    // })
  },
  watch: {
    // 如果 `question` 发生改变，这个函数就会运行
  },
  methods: {
    // // ...mapActions(['getProductDetail']),
    // addChannel () {
    //   this.priceList.push(this.priceForm)
    // },
    // handleDelChannel (index) {
    //   this.priceList.splice(index, 1)
    // },
    // // 工作日价格
    // handlePrice (value) {
    //   this.priceForm.nprice = value
    //   this.prices.push(value)
    //   this.priceForm.ctype = '1'
    //   this.ruleForm.pricelist.push(Object.assign({}, this.priceForm))
    // },
    // 周末价格
    // handlePricee (val) {
    //   this.priceForm.nprice = val
    //   this.prices.push(val)
    //   this.priceForm.ctype = '2'
    //   this.ruleForm.pricelist.push(Object.assign({}, this.priceForm))
    // },
    // submitForm (formName) {
    //   // 提交表单
    //   let cdesc = this.$refs.cdesc.content
    //   this.ruleForm.cdesc = cdesc
    //   this.$refs.ruleForm.validate(valid => {
    //     if (valid) {
    //       if (this.$route.query.uuid) {
    //         // 修改
    //         updateProduct(this.ruleForm).then(res => {
    //           this.$message({
    //             message: '修改成功',
    //             type: 'success'
    //           })
    //           this.$router.push('/productList')
    //         })
    //       } else {
    //         // 新增
    //         addProduct(this.ruleForm).then(res => {
    //           this.$message({
    //             message: '新增成功',
    //             type: 'success'
    //           })
    //           // this.$refs['ruleForm'].resetFields()
    //           this.$router.push('/productList')
    //         })
    //       }
    //     } else {
    //       return false
    //     }
    //   })
    // },
    // resetForm (ruleForm) {
    //   // 重置表单
    //   this.$refs[ruleForm].resetFields()
    // },
    // // 上传图片
    // // handleRemove (file, fileList) {
    // //   //删除图片
    // //   console.log('删除成功！')
    // // },
  //   uploadSuccess (response, file, fileList) {
  //     // 图片路径用@@连接
  //     let imageList = ''
  //     fileList.forEach(item => {
  //       imageList += item.url + '@@'
  //     })
  //     this.ruleForm.cpicpath = imageList
  //   },
  //   uploadError (response, file, fileList) {
  //     this.$message({
  //       message: '上传失败，请重试！',
  //       type: 'error'
  //     })
  //   },
  //   handleChange (value) {
  //     console.log(value)
  //   },
  //   handleChannel (e) {
  //     console.log(e)
  //   },
  //   // 配套设施
  //   handleChangeCs (e) {
  //     console.log(e)
  //     let _cservicefacility = ''
  //     e.forEach(item => {
  //       _cservicefacility += item + '@@'
  //     })
  //     this.ruleForm.cservicefacility = _cservicefacility
  //   },
  //   hanldeChangeOther (value) {
  //     let otherOrigin = value.split('，') // 用户输入的其他配套设施
  //     let otherFacilities = '' // 其他配套设施，用@@连接
  //     otherOrigin.forEach(item => {
  //       otherFacilities += item + '@@'
  //     })
  //     this.ruleForm.cservicefacility = this.ruleForm.cservicefacility + otherFacilities // 选择的配套与输入的配套合并
  //   },
  //   handleCcancelflag (optionId) {
  //     // 1免费、2限时、0不可
  //     switch (optionId) {
  //       case 1:
  //         this.ruleForm.ccancelflag = '1'
  //         break
  //       case 2:
  //         this.ruleForm.ccancelflag = '2'
  //         break
  //       case 0:
  //         this.ruleForm.ccancelflag = '0'
  //         break
  //     }
  //   }
  // },
  // async mounted () {
  //   if (this.$route.query.uuid) {
  //     this.filter = {uuid: this.$route.query.uuid}
  //     await this.getProductDetail(this.filter).then((res)=>{
  //       let data = res.data
  //       let cservicefacilityArr = data.cservicefacility.split('@@')  // 配套设施
  //       this.facilities=cservicefacilityArr
  //       this.ruleForm.cisaddbed = data.cisaddbed  // 是否加床
  //       let cpicpathArr = data.cpicpath.split('@@')  // 图片路径
  //       this.imageList = cpicpathArr
  //       this.priceList = data.pricelist
  //       // this.prices.
  //       // 政策价重新赋值
  //       data.pricelist.forEach((item)=>{
  //         this.prices.push(item.nprice)
  //       })
  //       console.log( data )
  //     })
  //     this.ruleForm = Object.assign({}, this.productDetailData)
  //     // 富文本赋值
  //     this.$refs.cdesc.content = this.ruleForm.cdesc
  //   }
  },
  components: {
    // editor // 富文本框组件
  }
}
</script>

<style lang="stylus" scoped>
.line
  text-align center
h5
  width 100px
  height 40px
  line-height 40px
  text-align right
  font-size 14px
  font-weight 400
  padding-right 20px
</style>
